<template>
	<view class="position-relative">
		<picker-view disabled :style="'height:'+pickerHeight+';color:'+columnColor+';'"
			:indicator-style="indicatorStyle" :value="value" @change="bindChange" @pickstart="bindChange" class="picker-view"
			indicator-class="select-line">
			<picker-view-column>
				<view class="items" v-for="(item,index) in years" :key="index">
					{{item}}
				</view>
			</picker-view-column>
			<picker-view-column>
				<view class="items" v-for="(item,index) in months" :key="index">
					{{item}}
				</view>
			</picker-view-column>
			<picker-view-column v-if="mode=='day'">
				<view class="items" v-for="(item,index) in days" :key="index">
					{{item}}
				</view>
			</picker-view-column>
		</picker-view>
		<view v-if="!isRoll" class="position-absolute top-0 right-0 left-0 bottom-0"></view>
	</view>
</template>

<script>
	export default {
		props: {
			//是否允许滚动
			isRoll: {
				type: Boolean,
				default: true
			},
			// column组件高度
			height: {
				type: String,
				default: "50rpx"
			},
			//整个时间组件的高度
			pickerHeight: {
				type: String,
				default: "140rpx"
			},
			//column文字颜色
			columnColor: {
				type: String,
				default: "#538B87"
			},
			mode: {
				type: String,
				default: "day"
			}
		},
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear();
			const months = [];
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			for (let i = 1990; i <= date.getFullYear() + 100; i++) {
				years.push(i);
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			return {
				years,
				year,
				months,
				month,
				days,
				day,
				value: [],
				indicatorStyle: `height: ${this.height}`,
			}
		},
		created() {
			let index = this.years.findIndex(e => e === this.year);
			this.value = [index, this.month - 1, this.day - 1];
			let days = this.getDaysOfMonth(this.year, this.month);
			this.days = [];
			for (let i = 1; i <= days; i++) {
				this.days.push(i);
			}
			this.$emit('getTime', {
				year: this.year,
				month: this.month,
				day: this.day
			})
		},
		methods: {
			getDaysOfMonth(year, month) {
				var date = new Date(year, month, 0);
				var days = date.getDate();
				return days;
			},
			async bindChange(e) {
				const val = e.detail.value
				this.year = this.years[val[0]];
				this.month = this.months[val[1]];
				let days = await this.getDaysOfMonth(this.year, this.month);
				this.days = [];
				for (let i = 1; i <= days; i++) {
					this.days.push(i);
				}
				this.day = this.days[val[2]];
				this.$emit('getTime', {
					year: this.year,
					month: this.month,
					day: this.day
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.picker-view {
		margin: auto;
		width: 50%;
		margin-top: 60rpx;
	}

	.items {
		align-items: center;
		justify-content: center;
		text-align: center;
		font-size: 36rpx;
		display: flex;
		font-weight: 500;
		color: #3D3D3D;
		// margin: 30rpx 0;
		// padding-top: 20rpx;
	}
	// 修改原有的上下边框颜色
	::v-deep .select-line::after {
		// position: absolute;
		// top: 50rpx;
		width: 122rpx;
		height: 4rpx;
		left: 34rpx;
	    border-bottom: 4rpx solid #D8D8D8;
		// content: '';
	}
	::v-deep .select-line::before {
		// position: absolute;
		// top: -30rpx;
		width: 122rpx;
		height: 4rpx;
		left: 34rpx;
	    border-top: 4rpx solid #D8D8D8;
		// content: '';
	}
	
</style>
